<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.5.17.js"></script>

</head>
<body>
    <!--创建了一块空间，包含vue元素-->
    <div id="app">
        <p style="border: 1px red solid" @mousemove="mouseMove">
            <!--
                .stop: 停止事件的传播, span标签的鼠标移动事件不会传递到 p标签
            -->
         <span  @mousemove.stop style="border: 1px blue solid">  这是一个段落 {{x + '::' +y}}</span>
        </p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",   //指定vue管理的元素
        //定义数据(model)
        data: {
            x : 0,
            y : 0
        },
        //定义方法
        methods:{
            mouseMove(event){
                this.x = event.clientX;
                this.y = event.clientY;

            }
        }
    });
</script>
</html>